<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>权限列表</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="/js/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="/js/jquery-3.1.1.min.js"></script>
    <script src="/js/myhttp.js"></script>
</head>
<body>
<div id="app">
    <el-form :inline="true" class="demo-form-inline" >
        <el-form-item >
            <el-form-item label="订单状态">
                <el-select v-model="querys" @change="QueryData()">
                    <el-option v-for="item in ['未发货','已发货']" :label="item" :value="item" ></el-option>
                </el-select>
            </el-form-item>
            <el-button type="success" @click="Query()">筛选</el-button>
            <el-button type="success" @click="QueryData()">刷新</el-button>
        </el-form-item>
    </el-form>

    <el-table border :data="dataList" style="width:100%">
        <el-table-column label="订单ID" prop="uid" ></el-table-column>
        <el-table-column label="商品图片" prop="image">
            <template slot-scope="scope">
                <img :src="scope.row.imgid" alt="Product Image" style="width: 50px; height: 50px;">
            </template>
        </el-table-column>
        <el-table-column label="商品名称" prop="goodsname"></el-table-column>
        <el-table-column label="订单总数量" prop="counts"></el-table-column>
        <el-table-column label="订单总价格" prop="prices"></el-table-column>
        <el-table-column label="订单状态">
            <template slot-scope="scope">
                <a v-if="scope.row.orderstatus==0">未发货</a>
                <a v-if="scope.row.orderstatus==1">已发货</a>
            </template>
        </el-table-column>
        <el-table-column>
            <template slot-scope="x">
                <el-button type="warning" size="mini" @click="See(x.$index,x.row)">查看物流</el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-dialog :visible.sync="Updateing" width="30%" title="下单">
        <el-form label-width="80px">
            <el-form-item label="下单数量">
                <el-input v-model="select.counts"></el-input>
            </el-form-item>
            <el-form-item label="地址">
                <el-form-item>
                    <el-select v-model="select.addressid">
                        <el-option v-for="item in addressList" :label="item.uname" :value="item.uid" >{{item.address}}</el-option>
                    </el-select>
                </el-form-item>

            </el-form-item>
            <el-form-item >
                <el-button type="success" size="mini" @click="SubmitUpdate()" >确定下单</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

</div>
</body>
<script>
    new Vue({
        el:"#app",
        data: {
            Createing:false,
            Updateing:false,
            dataList:[],
            news:{},
            select:{},
            querys:"",
            addressList:[],
            statuslist:['待发货','已发货']
        },
        methods:{
            Query(){
                if (this.querys == ""){
                    this.$message.error("请输入关键词")
                    return
                }
                if (this.querys=="未发货"){
                    this.querys = 0
                }else{
                    this.querys = 1
                }
                let temp = []
                for (let i =0 ;i<this.dataList.length;i++){
                    if (this.dataList[i].orderstatus == this.querys){
                        temp.push(this.dataList[i])
                    }
                }
                this.dataList = temp
            },
            InsertNew(){
                this.news = {}
                this.Createing = true
            },
            See(idx,row){
                if (row.orderstatus==0){
                    this.$message.error("还未发货！")
                    return
                }
                window.location.replace("/html/deliveryinfo.html?order="+row.uid+"&address="+row.addressid)
            },
            QueryData(){
                let that=this
                myhttps("/Orders/queryMyOrder",{userid:localStorage.getItem("uid")}).then(res=>{
                    for (let i =0;i<res.body.length;i++){
                        res.body[i].imgid = "http://localhost:8080/images/"+res.body[i].imgid
                    }
                    that.dataList = res.body

                }).catch(res=>{
                    that.$message.error("错误："+res.msg)
                })

            }
        },
        mounted(){
            this.QueryData()
        }
    })

</script>
</html>
